<template lang="pug">
.cp-product-basic-tree
  .tree-wrap(v-loading="treeLoading")
    .tree-title
      span.text {{ currentNode ? currentNode.name : null }}
      span.right-btn
        el-tooltip(content="新建文件夹")
          i.icon-act.el-icon-plus(@click="createDir")
        el-tooltip(content="新建查询")
          i.icon-act.el-icon-circle-plus-outline(@click="createQuery")
        el-tooltip(content="查看")
          i.icon-act.el-icon-view(@click="viewQuery")
        el-tooltip(content="编辑")
          i.icon-act.el-icon-edit(@click="editQuery")
        el-tooltip(content="删除")
          i.icon-act.el-icon-delete(@click="deleteQuery")
    el-tree.tree-body(
      :data="treeData"
      :props="limitProps"
      node-key="id"
      default-expand-all
      :expand-on-click-node="false"
      @node-click="nodeClick")
      .custom-tree(slot-scope="{ node, data }")
        p(:class="{active: currentNode && currentNode.id === data.id}") {{ data.name }}
  el-dialog(
    :title="tdTitle"
    width="20%"
    :visible.sync="tdVisible")
    el-input(
      v-model="tdNodeName"
      placeholder="请输入文件夹名称")
    .dialog-footer(slot="footer")
      el-button(@click="treeCancel") 取消
      el-button(type="primary", @click="treeSave") 保存
  query-table(
    :title="queryTitle",
    :visible.sync="queryVisible",
    :is-edit="queryEdit",
    :parent-data="queryData",
    @submit="onQuerySubmit",
    @close="queryVisible = false")
</template>

<script>
import { mapGetters } from 'vuex';
import QueryTable from './QueryTable';

export default {
  name: 'productbasictree',
  components: {
    QueryTable
  },
  props: {
    detail: Array
  },
  data() {
    return {
      limitProps: {
        children: 'children',
        label: 'label'
      },
      treeLoading: false,
      treeData: [{
        id: '1',
        name: '个人',
        children: [{
          id: '1-1',
          name: '文件夹A',
          children: [{
            id: '1-1-1',
            name: '子类A1'
          }, {
            id: '1-1-2',
            name: '子类A2'
          }]
        }, {
          id: '1-4',
          name: '文件夹B',
          children: [{
            id: '1-4-1',
            name: '子类B1'
          }, {
            id: '1-4-2',
            name: '子类B2'
          }]
        }]
      }, {
        id: '2',
        name: '团队',
        children: [{
          id: '2-1',
          name: '团队文件夹A',
          children: [{
            id: '2-2-1',
            name: '子类A1'
          }, {
            id: '2-2-2',
            name: '子类A2'
          }]
        }]
      }],
      currentNode: null,
      focusNode: null,
      tdEdit: false,
      tdTitle: '新建文件夹',
      tdVisible: false,
      tdNodeName: null,
      // query table
      queryTitle: '新建查询',
      queryVisible: false,
      queryEdit: true,
      queryData: []
    };
  },
  methods: {
    // 新建文件夹
    createDir() {
      if (!this.currentNode) {
        this.$message.info('请先选择节点');
        return;
      }
      this.tdEdit = false;
      this.tdTitle = '新建文件夹';
      this.tdVisible = true;
      this.tdNodeName = null;
    },
    // 新建查询
    createQuery() {
      this.$emit('create-query');
      if (!this.currentNode) {
        this.$message.info('请先选择节点');
        return;
      }
      this.queryTitle = '新建查询';
      this.queryVisible = true;
      this.queryEdit = true;
      this.queryData = [];
    },
    // 查看查询
    viewQuery() {
      this.$emit('create-query');
      if (!this.currentNode) {
        this.$message.info('请先选择节点');
        return;
      }
      this.queryTitle = '查看查询';
      this.queryVisible = true;
      this.queryEdit = false;
      this.queryData = [
        { key: '1', parent: null, children: 1, level: 1, type: 'type0', conAttr: '2', conAffect: '3', conValue: '已发布', nodeAffect: '0' },
        { key: '1-1', parent: null, children: 0, level: 2, type: 'type1', conAttr: '5', conAffect: '6', conValue: '已发布', nodeAffect: '1' }
      ];
    },
    // 编辑查询
    editQuery() {
      this.$emit('edit-query');
      if (!this.currentNode) {
        this.$message.info('请先选择节点');
        return;
      }
      this.queryTitle = '编辑查询';
      this.queryVisible = true;
      this.queryEdit = true;
      this.queryData = [
        { key: '1', parent: null, children: 1, level: 1, type: 'type0', conAttr: '2', conAffect: '3', conValue: '已发布', nodeAffect: '0' },
        { key: '1-1', parent: null, children: 0, level: 2, type: 'type1', conAttr: '5', conAffect: '6', conValue: '已发布', nodeAffect: '1' }
      ];
    },
    // 删除查询
    deleteQuery() {
      if (!this.currentNode) {
        this.$message.info('请先选择节点');
        return;
      }
      this.$confirm('此操作将永久删除该条记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.removeNode(this.focusNode, this.currentNode);
      }).catch(() => {
        this.$message({ type: 'info', message: '已取消删除' });
      });
    },
    // 取消编辑
    treeCancel() {
      this.tdVisible = false;
    },
    // 保存编辑
    treeSave() {
      if (!this.tdNodeName) {
        this.$message.info({ message: '请输入名称' });
        return;
      }
      this.treeLoading = true;
      setTimeout(() => {
        if (this.tdEdit) {
          this.currentNode.name = this.tdNodeName;
        } else {
          this.addNode(this.currentNode, this.tdNodeName);
        }
        this.treeLoading = false;
        this.tdVisible = false;
        this.$message({ message: '保存成功', type: 'success' });
      }, 500);
    },
    // 添加节点
    addNode(data, name) {
      let id = '';
      const len = data.children && data.children.length;
      if (len) {
        const last = data.children[len - 1].id;
        const arr = last.split('-');
        const prev = arr[arr.length - 1];
        id = `${data.id}-${Number(prev) + 1}`;
      } else {
        id = `${data.id}-1`;
      }
      const newChild = { id, name, children: [] };
      if (!data.children) {
        this.$set(data, 'children', []);
      }
      data.children.push(newChild);
    },
    // 删除节点
    removeNode(node, data) {
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex(d => d.id === data.id);
      children.splice(index, 1);
      this.currentNode = null;
    },
    // 节点点击
    nodeClick(data, node) {
      this.currentNode = data;
      this.focusNode = node;
      if (data.id.split('-').length > 2) {
        // this.loadDataList();
        this.$emit('change-list');
      }
    },
    // 保存查询
    onQuerySubmit() {
      console.log('保存查询');
    }
  },
  computed: {
    ...mapGetters([])
  }
};
</script>

<style lang="sass">
.cp-product-basic-tree
  height: 100%
  background-color: #fff
  .tree-wrap
    height: 100%
  .tree-title
    position: relative
    height: 40px;
    line-height: 40px;
    background: #f5f7fa;
    margin: 0;
    padding-left: 15px;
    border: 1px solid #ebeef5;
    box-sizing: border-box;
    color: #606266;
    .right-btn
      position: absolute
      right: 16px
      line-height: 40px
      .icon-act
        font-size: 20px
  .el-tree
    height: calc(100% - 40px)
    overflow-x: hidden
    overflow-y: auto
  .el-tree-node__content
    height: 34px
  .el-tree-node:focus>.el-tree-node__content, .el-tree-node__content:hover
    background-color: transparent
  .custom-tree
    flex: 1
    display: flex
    align-items: center
    justify-content: space-between
    font-size: 14px
    padding-right: 8px
    height: 32px
    line-height: 32px
    .el-input
      max-width: 150px
    .ml
      margin-left: 14px
    .active
      color: #5D9BFB
</style>
